<template>
    <el-row class="row" :gutter="gutter">
        <el-col v-for="(col, index) in containers" :key="index" :span="col.span">
            <div  :class="{col:true,colNull: !(containers[index].children && containers[index].children.length !== 0)}">
                <component @dropRemove="(e)=>{$emit('dropRemove',e)}" style="pointer-events: auto;user-select:auto" :checkUUID="checkUUID" :is="componentName" v-model="containers[index]"/>
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import { defineProps } from 'vue'
const prop = defineProps({
    modelValue:[Object],
    componentName:{
        type:String,
        default:'viewChild'
    },
    gutter:{
        type:Number,
        default:20
    },
    checkUUID:String,
    containers:{
        type: Array,
        default: () => {
            return [
                {span:6,children:[]},
                {span:6,children:[]},
                {span:6,children:[]},
                {span:6,children:[]}
            ]
        }
    },
    
})
</script>
<style scoped>
.row{
    padding: 5px;
    box-sizing: border-box;
    background: white;
}
.col{
    background: rgb(234, 233, 233);
}
.colNull{
    height: 50px;
}
</style>